<script setup lang="ts">
import api from '@/api'
import * as echarts from 'echarts'
import { ref, onMounted, reactive } from 'vue'
import { ElButton } from 'element-plus'
import htmlToPdf from '@/utils/exportPDF'
import { watch } from 'vue'
const props = defineProps({
    data: {
        type: Object,
        default: () => null
    },
    showDownload: {
        type: Boolean,
        default: () => false
    }
})
const {getTestById}=api;
const report = ref({})

const getReport = async (reportData) => {
    report.value = reportData    
    
}


getReport(props.data)
const exportPDF = async () => {
//    htmlToPdf.getPdf(student.value.name + '的评测报告', '#exportDiv')
}
</script>
<template>
    <div v-if="props.showDownload" style="position: absolute; top: 10px; right: 10px; width: 60px">
        <ElButton @click="exportPDF">
            <Icon icon="mi:download" />
        </ElButton>
    </div>
    <div class="root">
        <div id="exportDiv">            
            <div class="page">
                <div style="font-weight: bold; text-align: center; padding: 20px; font-size: 36px;color: #FA9F49;">儿童专注力评估报告</div>            
                <div class="title"> <i></i>基本信息 </div>
                <div class="baseContent">
                    <div class="baseItem"><span>儿童姓名</span><span></span></div>
                    <div class="baseItem"><span>儿童性别</span><span></span></div>
                    <div class="baseItem"><span>测试年龄</span><span></span></div>
                    <div class="baseItem"><span>评估中心</span><span></span></div>                    
                    <div class="baseItem"><span>评估老师</span><span></span></div>                    
                    <div class="baseItem"><span>评估时间</span><span></span></div>                                                    
                </div>
            </div>
            <div class="page">
                <div class="title"> <i></i>整体评估结果</div>
                <div class="pageContent">                    
                    <p>
                        专注力，也被称为注意力集中或专心，是指个体将精力投入到特定任务或刺激上，并忽视其他无关的因素的能力。这种精神状态贯穿于我们的日常生活和学习工作中，它能够帮助我们保持对目标的锐利思考，有效地处理信息，并进行深入的思维和学习。
                    </p>
                    <p>
                        儿童专注力并非天生铸就，却是决定孩子未来学习能力和生活技能发展的关键因素。良好的专注力可以助力孩子们充分吸收信息，更好地理解复杂概念。通过定制化的专注力练习，可以帮助孩子们提高记忆力，加快思维速度，提升解决问题的能力。更为重要的孩子们可以学会如何更有效地管理时间，如何深入投入一项任务，不断提升自我。
                    </p>
                    <div class="pageItem"><i></i>专注力指标分布图</div>
                    <p>
                        1.
                        仅供参考：本量表提供的结果仅供参考，不能单独用于诊断心理健康问题或作为确诊的依据。它只是一个工具，需要结合其他信息和专业判断来做最终的评估和决策。
                    </p>
                    <p>
                        2.
                        个体差异：每个学生的心理健康状况都是独特的，本量表的结果可能受到各种因素的影响，如个人差异、环境背景等。因此，评估结果应结合其他信息来进行综合判断。
                    </p>
                    <p>
                        3.
                        隐私保护：在进行本量表评估时，需要遵守隐私保护和伦理原则，确保学生的信息得到保密处理，并严格控制访问权限。
                    </p>
                    <p>
                        4.
                        结果建议：在使用本量表进行心理评估时，建议寻求专业心理咨询师或医生的指导和解读。他们可以根据学生的具体情况进行综合评估，并提供相关的干预措施和建议。
                    </p>
                </div>
            </div>
            <div class="page">
                <div class="title"><i></i>同学PHQ-9测评报告 - 整体情况</div>
                <div class="pageContent">
                    <!-- <div class="pageItem"><i></i>因子总分:{{ answer.totalScore }} 分</div> -->
                    <div ref="totalScoreRef" style="width: 100%; height: 300px"></div>
                    <!-- <div style="text-align: center; margin-top: -70px; font-size: 18px">
                        <span v-if="answer.totalScore < 5" style="color: #13783d">正常</span>
                        <span v-else-if="answer.totalScore >= 5 && answer.totalScore < 10" style="color: #37a2da">正常</span>
                        <span v-else-if="answer.totalScore >= 10 && answer.totalScore < 15"
                            style="color: #fcbc25">中度预警</span>
                        <span v-if="answer.totalScore >= 15 && answer.totalScore < 20" style="color: #f85f00">中重度预警</span>
                        <span v-if="answer.totalScore >= 20" style="color: #aa2c30">重度预警</span>
                    </div> -->
                    <div class="pageItem"><i></i>说明</div>
                    <p>
                        指导与建议仅供参考，实际情况可能会有所不同。建议在进行任何评估和判断时，要结合个体情况、专业意见以及其他评估工具的结果进行综合分析和判断。重要的是要及时识别和处理学生的心理健康问题，以确保他们能够获得适当的支持和干预。专业的心理健康专家将能够根据具体情况提供更准确和个性化的建议和支持。
                    </p>
                    <!-- <div v-for="(item, index) in getTotalReport(answer.totalScore)" :key="index">
                        <div class="pageItem"><i></i><span v-html="item.name"></span></div>
                        <p v-for="(content, index1) in item.content" :key="index1">
                            {{ content.replaceAll('{name}', student.name) }}</p>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.root {
    background-color: #FA9F49;
    padding: 10px;
    height: 100%;
    font-size: 12px;
    overflow-y: auto;
}

.page {
    background-color: #fff;
    border-radius: 5px;
    line-height: 30px;
    margin-top: 20px;
}

.page .title {
    border-bottom: #FA9F49 solid 1px;
    padding: 10px;
    color:#FA9F49;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
}

.page .title i {
    display: inline-block;
    width: 10px;
    height: 15px;
    margin-right: 5px;
    background-color: #FA9F49;
    font-weight: bold;
}

.baseContent {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 20px 10px;
    gap: 5px;
}

.baseItem {
    display: flex;
    gap: 5px;
}

.baseItem span {
    display: block;
    font-size: 10px;
}

.baseItem span:first-child {
    background-color: #FA9F49;
    text-align: center;
    width: 40%;
}

.pageContent {
    padding: 10px;
}

.pageItem {
    font-weight: bold;
    color:#FA9F49;
}

.pageItem i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background-color: #FA9F49;
    
    margin-right: 5px;
}

p {
    text-indent: 2em;
}
</style>
